<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 监听子组件事件 -->
		<counter ref="one" @change='handleChange'></counter>
		<counter ref="two" @change='handleChange'></counter>
		<!-- 显示两个counter里面的和-->
		<div>{{total}}</div>
	</div>
		
	<script type="text/javascript">
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return {
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++
					// number+1的同时向父组件传递事件：
					this.$emit('change')
				}
			}
		});

		var vm=new Vue({
			el:"#root",
			data:{
				// 定义一个总数
				total:0
			},
			methods:{
				// 在handlechange方法里计算两个子组件的和
				handleChange:function(){
					this.total=this.$refs.one.number+this.$refs.two.number
					// console.log(this.$refs.one.number)
					// console.log(this.$refs.two.number)
				}
			}
		})



	</script>
</body>
</html>